<template>
  <div ref="shopRetail" class="shopRetail">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="shopRetailForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="consumerName" label="顾客姓名">
            <el-input v-model="formData.consumerName" clearable placeholder="请输入顾客姓名" />
          </el-form-item>
          <el-form-item prop="consumerPhone" label="联系电话">
            <el-input v-model="formData.consumerPhone" clearable placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item prop="disCode" label="经销商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/dealer/page"
              placeholder="请输入经销商"
              lable-name="name"
              value-name="code"
              custom-name="name"
              must-val
              :params="{query:{}, type:1}"
              :value.sync="formData.disCode"
              @selectChange="v=>{
                $set(formData, 'shopCode', '')
              }"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="shopCode" label="门店">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/shop/page"
              placeholder="请选择"
              lable-name="shopName"
              value-name="shopCode"
              custom-name="shopName"
              :disabled="!formData.disCode"
              :params="{query:{customerCodes: formData.disCode}, type:1}"
              :parent-id="formData.disCode"
              :value.sync="formData.shopCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="retailOrderCode" label="零售订单号">
            <el-input v-model="formData.retailOrderCode" clearable placeholder="请输入零售订单号" />
          </el-form-item>
          <el-form-item prop="saleDate" label="零售日期" :span="8">
            <el-date-picker
              v-model="formData.saleDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择零售起始日期"
            />
          </el-form-item>
          <el-form-item align="left">
            <Button @click="resetForm('shopRetailForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('shopRetailForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="shopRetaiTable" no-request :other-filters="filtersRaw" :other-raw="paramsRaw" :table-config="shopRetaiTableConfig" />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { parseTime } from '@/utils/'
// import { JsonToUrl } from '@/utils/params-format'
export default {
  name: 'InfoDataShopRetail',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker
  },
  data() {
    return {
      formData: {
        consumerName: '', // 顾客姓名
        consumerPhone: '', // 联系电话
        disCode: '', // 经销商
        shopCode: '', // 门店
        retailOrderCode: '', // 零售订单号
        saleDate: [] // 零售日期
      },
      formRules: {
        consumerPhone: {
          pattern: /^1\d{10}$/, message: '请输入正确的联系电话', trigger: 'change'
        }
      },
      shopRetaiTableConfig: {
        interfacePath: '/call-center/api/v1/retailOrderInfo/page',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'source',
            label: '来源系统',
            minWidth: 100,
            formatData: v => {
              return v.source === 'top1' ? 'TOP' : (v.source === 'top2' ? 'PANDA' : '')
            }
          },
          {
            prop: 'retailOrderCode',
            label: '零售订单号',
            minWidth: 140,
            className: 'table-handelclick-text',
            isButton: true,
            clickFun: this.retailOrderDetail
          }, {
            prop: 'saleDate',
            label: '零售日期',
            minWidth: 100,
            formatData: (val) => {
              if (val.saleDate) return parseTime(val.saleDate, '{y}-{m}-{d}')
              return '--'
            }
          }, {
            prop: 'disName',
            label: '经销商',
            minWidth: 100
          }, {
            prop: 'shopName',
            label: '门店'
          }, {
            prop: 'consumerName',
            label: '顾客姓名',
            minWidth: 100
          }, {
            prop: 'consumerPhone',
            label: '联系电话',
            minWidth: 100
          }
        ]
      },
      filtersRaw: [],
      paramsRaw: {}
    }
  },
  created() {
    // 检查是否是通过来电弹屏的跳转
    this.detailByDisplay()
    // 通话记录过来
    this.formTelRecord()
  },
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const fd = this.formData
          const filtersRaw = []
          const paramsRaw = {}
          //           consumerName
          // consumerPhone
          // disCode
          // retailOrderCode
          Object.entries(fd).forEach(([k, v]) => {
            switch (k) {
              case 'saleDate':
                if (Array.isArray(v) && v.length > 0) {
                  filtersRaw.push({ id: 'saleDate1', property: 'saleDate', value: v[0], operator: '>=' })
                  filtersRaw.push({ id: 'saleDate2', property: 'saleDate', value: v[1].replace(/00:00:00/, '23:59:59'), operator: '<=' })
                }
                break
              case 'consumerName':
                if (v) {
                  filtersRaw.push({ id: 'consumerName', property: 'consumerName', value: v, operator: 'LIKE' })
                }
                break
              case 'consumerPhone':
                if (v) {
                  filtersRaw.push({ id: 'consumerPhone', property: 'consumerPhone', value: v, operator: '=' })
                }
                break
              case 'disCode':
                if (v) {
                  filtersRaw.push({ id: 'disCode', property: 'disCode', value: v, operator: '=' })
                }
                break
              case 'shopCode':
                if (v) {
                  filtersRaw.push({ id: 'shopCode', property: 'shopCode', value: v, operator: '=' })
                }
                break
              case 'retailOrderCode':
                if (v) {
                  filtersRaw.push({ id: 'retailOrderCode', property: 'retailOrderCode', value: v, operator: '=' })
                }
            }
          })

          if (filtersRaw.length === 0) {
            this.$message({
              message: '请至少输入一项查询条件',
              type: 'warning'
            })
            return
          }
          this.filtersRaw = filtersRaw
          this.paramsRaw = paramsRaw
          this.$nextTick(() => {
            this.$refs.shopRetaiTable.initTableData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 详细界面
    retailOrderDetail(row) {
      if (row.source === 'top1') {
        this.$router.push({ path: `/infoData/shopRetail/detail`, query: { saleOrderCode: row.retailOrderCode }})
      } else if (row.source === 'top2') {
        this.$router.push({ name: `Top2RetailDetail`, query: { retailOrderCode: row.retailOrderCode, disCode: row.disCode }})
      }
    },
    // 从来电弹屏过来，详细界面
    detailByDisplay() {
      const q = this.$route.query
      if (q.retailOrderCode) {
        this.retailOrderDetail(q)
      }
      if (q.callTel) {
        this.$set(this.formData, 'consumerPhone', q.callTel)
      }
    },
    // 从通话记录过来
    formTelRecord() {
      const q = this.$route.query
      if (q.form === 'telRecord') {
        this.$set(this.formData, 'retailOrderCode', q.callOrderCode)
      }
      if (q.callTel) {
        this.$set(this.formData, 'consumerPhone', q.callTel)
      }
    },
    /**
     * 重置搜索表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.shopRetail {
  /deep/ .el-tooltip {
    .table-other {
      & span.table-handelclick-text {
        color: #3DC094 !important;
      }
    }
  }
}
.shopRetail /deep/ .el-tooltip .table-other span.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
